<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魔豆素材网</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/shouhui.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style>
		.header .nav{
			margin-left: 20px;
		}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="header-inner w-m clearfix">
				<div class="logo"><img src="img/logo.png" alt=""></div>
				<ul class="nav clearfix">
					<li><a href="modou.html">首页</a></li>
					<li><a href="tuku.html">原创图库</a></li>
					<li><a href="shouhui.html" class="active">手绘定制</a></li>
				</ul>
				<div class="search" style="margin-left: 50px;">
					<span class="fenlei">分类<img src="img/xiala.png" alt="">
						<ul class="xiala">
							<li>梦幻小说</li>
							<li>都市小说</li>
							<li>男频封面</li>
							<li>素锦封面</li>
							<li>校园封面</li>
							<li>梦幻小说</li>
						</ul>
					</span>
					<span class="text">
						<!-- <span>小说首页<i class="layui-icon layui-icon-close" onclick="close()"></i></span> -->
						<input type="text">
					</span>
					<button class="button"><img src="img/search.png" ></button>
				</div>
				<!-- 已登录 -->
				<div class="user clearfix">
					<img src="img/tx.png" >
					<a href="person.html">
					<span>
						张灵灵<br/>
						<font>ID:235342</font>
					</span>
					</a>
				</div>
				<!-- 未登录 -->
				<div class="reg" style="display: none;">
					<a href="login.html">登录</a> / <a href="reg.html">注册</a>
				</div>
			</div>			
		</header>
		<!-- banner -->
		<div class="banner">
			<div class="w-m price">
				<h1>加入原创封面素材网VIP</h1>
				<!-- 图片盒子 -->
				<div class="icon-box">
					<img class="icon" src="./img/sucaixaizai.png" alt="">
					<p>正版素材 • 海量下载</p>
				</div>
				<!-- 按钮 -->
				<div class="join-btn showPayBox">立即加入</div>
			</div>
		</div>
		<!-- 三个特点 -->
		<div class="middle">
			<ul class="clearfix w-m">
				<li class="item">
					<img src="img/deng.png">
					<p>
						<span>原创手绘</span><br>
						<span>作品严格审核</span>
					</p>
				</li>
				<li class="item">
					<img src="img/biao.png">
					<p>
						<span>商用素材</span><br>
						<span>正版版权保证</span>
					</p>
				</li>
				<li class="item">
					<img src="img/xinyu.png">
					<p>
						<span>企业用户</span><br>
						<span>专属认证，账号可多人使用</span>
					</p>
				</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="w-m price">
				<!-- vip套餐 -->
				<div class="vip-out-box">
					<img class="top" src="./img/xuanzenidetaocan.png" alt="">
					<!-- 三个选择盒子 -->
					<div class="item-box">
						<div class="item">
							<!-- price -->
							<dl class="price-box">
								<dt>499</dt>
								<dd>元/年</dd>
							</dl>
							<h6>普通VIP</h6>
							<p>所有图库均享5折<br>
							每张图只限1本小说使用</p>
							<!-- 立即开通 -->
							<div class="opne-btn showPayBox">
								<span>立即开通</span>
								<img src="./img/lijikaitong.png" alt="">
							</div>
						</div>
						<!-- 2 -->
						<div class="item">
							<!-- price -->
							<dl class="price-box">
								<dt>999</dt>
								<dd>元/年</dd>
							</dl>
							<h6>豪华VIP</h6>
							<p>所有图库均享3折<br>
							每张图只限1本小说使用</p>
							<!-- 立即开通 -->
							<div class="opne-btn showPayBox">
								<span>立即开通</span>
								<img src="./img/lijikaitong.png" alt="">
							</div>
						</div>
						<!-- 2 -->
						<div class="item">
							<!-- price -->
							<dl class="price-box">
								<dt>5999</dt>
								<dd>元/年</dd>
							</dl>
							<h6>钻石VIP</h6>
							<p>所有图库均免费使用<br>
							每张图不限制使用次数</p>
							<!-- 立即开通 -->
							<div class="opne-btn showPayBox">
								<span>立即开通</span>
								<img src="./img/lijikaitong.png" alt="">
							</div>
						</div>
					</div>
				
				</div>
				<!-- 合作伙伴 -->
				<div class="teamWork">
					<img class="top" src="./img/xuanzenidetaocan.png" alt="">
					<!-- 合作方盒子 -->
					<div class="team-box">
						<!-- 1 -->
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
						<div class="team-item"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer class="footer">
			<ul class="nav">
				<li><a href="">关于我们</a></li>
				<li><a href="">友情链接</a></li>
				<li><a href="">个人会员版</a></li>
				<li><a href="">隐私协议</a></li>
				<li><a href="">服务条款</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<p class="flink">
				<a href="">联合推广 market@163.com</a>
				<a href="">友链交换 market@163.com</a>
			</p>
			<p class="ewm"><img src="img/ewm.png"></p>
			<a href="" class="beian">Copyright © 2017 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号</a>
		</footer>
		<!-- 弹窗 -->
		<div class="tc">
			<div class="innerTc">
				<div class="tcHead">
					<h1>制作封面</h1>
					<p>请认真填写定制单,以便设计师能够准确的了解你的小说情况好量身定制</p>
				</div>
				<div class="tcBottom">
					<div>
						<span>小说名字</span>
						<input type="text">
					</div>
					<div>
						<span>小说作者</span>
						<input type="text">
						<span style="margin:0 29px 0 19px;">QQ</span>
						<input type="text">
					</div>
					<div class="clearfix">
						<span>小说类型</span>
						<ul class="clearfix tcchoose">
							<li class="xstype">玄幻</li>
							<li>奇幻</li>
							<li>武侠</li>
							<li>仙侠</li>
							<li>都市</li>
							<li>言情</li>
							<li>历史</li>
							<li>军事</li>
							<li>竞技</li>
							<li>科幻</li>
							<li>灵异</li>
							<li>同人</li>
							<li>漫画</li>
							<li>二次元</li>
							<li>其他</li>
						</ul>
					</div>
					<div>
						<span>小说地址</span>
						<input type="text">
					</div>
					<div>
						<span>小说简介</span>
						<input type="text">
					</div>
					<p class="tijiao">提交申请</p>
				</div>
			</div>
		</div>
		<!-- 支付弹窗 -->
		<div class="pay-out-box">
			<div class="pay-main">
				<div class="pay-main-warp">
					<div class="img-box">
						<img src="./img/pay-popup-img.png" alt="">
					</div>	
					<!-- 当前vip登记 -->
					<div class="vip-box">
						<span>您是</span>
						<img src="./img/normal_vip.png" alt="">
					</div>
					<ul class="price-box">
						<li>单价 <span>￥50</span></li>
						<li>数量 <span>5</span></li>
						<li>总计 <span>25</span></li>
					</ul>
					<!-- 支付方式 -->
					<div class="pay-way">
						支付方式
						<div class="btn-pay">
							<div class="btn active">支付宝</div>
							<div class="btn">微信</div>
						</div>
					</div>
					<!-- 确认按钮 -->
					<div class="btn-box">
						<div class="button cancel closePayBox">取消</div>
						<div class="button ok confirmBuy">确认购买</div>
					</div>
					<!-- 两行文字 -->
					<p class="txt-bottom">
						<a>升级VIP</a>
						<a class="last">联系客服</a>
					</p>
				</div>
				<!-- 关闭按钮 -->
				<img class="clsoe-pay closePayBox"  src="./img/close_pay.png" alt="">
			</div>
		</div>
		<!-- 支付弹窗 end -->
		<!-- 右边侧边栏 -->
		<ul class="right-fix-menu">
			<li>企业<br> VIP</li>
			<li>加入<br> VIP</li>
			<li>QQ<br> 登录</li>
			<li>微信<br> 登录</li>
			<li>客服</li>
			<li class="last">
				<img src="./img/backto-top-arow.png" alt="">
				<span>顶部</span>
			</li>
		</div>
		<!-- 右边侧边栏 end-->
		<script type="text/javascript">
			
			layui.use(['jquery', 'element', 'rate','layer'], function() {
				var $ = layui.$,
					rate = layui.rate,
					layer = layui.layer,
					element = layui.element;

				rate.render({
					elem: '#test1',
					value: 4,
					readonly: true
				});
				rate.render({
					elem: '#test2',
					value: 4,
					readonly: true
				});
				rate.render({
					elem: '#test3',
					value: 4,
					readonly: true
				});
				
				// 显示弹窗
				$(".yaoqing").click(function(){
					$(".tc").show();
				})
				// 提交弹窗内容
				$(".tijiao").click(function(event){					
					layer.alert("提交成功！")
					$(".tc").hide();					
				})
				// 阻止冒泡
				$(".innerTc").click(function(event){
					event.stopPropagation();
				})
				// 点击空白处关闭弹窗
				$(".tc").click(function(event){
					event.stopPropagation();
					$(".tc").hide();
				})
				// 筛选
				$(".tcchoose li").click(function(){
					$(this).siblings().removeClass("xstype");
					$(this).addClass("xstype");
				})
				// 搜索框
				$(".xiala li").click(function(){
					$(".text").html('<span>'+$(this).text()+'<i class="layui-icon layui-icon-close"></i></span>');
				})
				// 关闭表单内容
				$(".text").on('click','.layui-icon-close',function(){
					$(".text").html('<input type="text">');
				})
				$('#fabu').click(function(){
					layer.alert("任务发布……")
				})
				$('#huashi').click(function(){
					layer.alert("成为画师……")
				})
				// 获取所搜词
				$(".search .button").click(function(){
					var search=$(".text span").text()||$(".text input").val();
					if(search.length>0){
						console.log(search)
						window.open("search.html")
					}else{
						layer.tips('请输入搜索词', '.text', {tips: [3, '#00cc90'],time:1500, anim: 6});
						return false;
					}
				})
				// 显示支付页面
				$(".showPayBox").click(function () {
					$(".pay-out-box").show();
				})
				// 隐藏支付页面
				$(".closePayBox").click(function () {
					$(".pay-out-box").hide();
				})
				// 确认购买
				$(".confirmBuy").click(function(){
					layer.alert("购买成功")
				})
				// 支付方式切换
				$(".btn-pay .btn").click(function(){
					$(this).addClass("active");
					$(this).siblings(".btn").removeClass("active");
				})
				// 监听页面滚动
				 $(document).scroll(function() {
			        var scroH = $(document).scrollTop();  //滚动高度
					var viewH = $(window).height();  //可见高度 
					var contentH = $(document).height();  //内容高度
			
			        if(scroH >400){  //距离顶部大于100px时
						console.log("xx",scroH)
						$(".right-fix-menu").show();
			        }else{
						$(".right-fix-menu").hide();
					}
	   			 })
				// 回到顶部
				var oScrolltop = document.querySelector('.right-fix-menu li.last');
				oScrolltop.onclick = function() {
					function smoothscroll() {
						var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
						if (currentScroll > 0) {
							window.requestAnimationFrame(smoothscroll);
							window.scrollTo(0, currentScroll - (currentScroll / 6));
						}
					}
					smoothscroll()
				}
			});
		</script>
	</body>
</html>
